<template>
  <div ref="echartDom"></div>
</template>

<script setup>
import {ref, defineProps, onMounted, onUnmounted, inject, shallowRef, defineExpose} from 'vue'
import {pxToRem} from "@/utils/index";

const props = defineProps({
  currentEconomicDataStatisticsTab: { // tab类型
    type: String,
    default: 'population'
  },
  cityAreaData: {
    type: Object,
    default: () => {
    }
  }
});

const echartDom = ref(null);
const myChart = shallowRef(null);
const echarts = inject('echarts');
const scatterSchema = ref(['population', 'GDP', 'perGDP']) // 宏观经济数据统计-散点图-schema数据

const macroEconomicDataStatisticsSizeFunc = (x) => {
  let y = Math.sqrt(x / 5e8) + 0.1;
  return pxToRem(y * 400);
};

const initMacroEconomicDataStatistics = (option) => { // 宏观经济数据统计
  const tempSymbolSizeIndex = scatterSchema.value.findIndex(x => x === props.currentEconomicDataStatisticsTab)
  for (let n = 0; n < props?.cityAreaData.timelineList.length; n++) {
    option.baseOption.timeline.data.push(props?.cityAreaData.timelineList[n]);
    option.options.push({
      title: {
        show: true,
        text: props?.cityAreaData.timelineList[n] + ''
      },
      series: {
        name: props?.cityAreaData.timelineList[n],
        type: 'scatter',
        itemStyle: {
          opacity: 0.8
        },
        data: props?.cityAreaData.series[n],
        symbolSize: (val) => {
          return macroEconomicDataStatisticsSizeFunc(val[2][tempSymbolSizeIndex]);
        }
      }
    });
  }
}

const initEchart = () => {
  if (echartDom.value) {
    const tempSymbolSizeIndex = scatterSchema.value.findIndex(x => x === props.currentEconomicDataStatisticsTab)
    myChart.value = echarts.init(echartDom.value);
    let option = {
      baseOption: {
        timeline: {
          axisType: 'category',
          orient: 'vertical',
          autoPlay: true,
          inverse: true,
          playInterval: 1000,
          left: null,
          right: 0,
          top: pxToRem(20),
          bottom: pxToRem(20),
          width: pxToRem(55),
          height: null,
          symbol: 'none',
          checkpointStyle: {
            borderWidth: 2
          },
          controlStyle: {
            showNextBtn: false,
            showPrevBtn: false
          },
          data: []
        },
        title: [
          {
            text: props?.cityAreaData.timelineList[0],
            textAlign: 'center',
            left: '70%',
            top: '55%',
            textStyle: {
              fontSize: pxToRem(50)
            }
          }
        ],
        grid: {
          top: '15%',
          left: 0,
          right: '17%',
          bottom: '7%',
          containLabel: true,
        },
        tooltip: {
          padding: 5,
          borderWidth: 1,
          formatter: (obj) => {
            let value = obj.value;
            let tempDom = ''
            switch (props.currentEconomicDataStatisticsTab) {
              case 'population':
                tempDom = '人口：' + value[2][0] + '<br>'
                break;
              case 'GDP':
                tempDom = 'GDP：' + value[2][1] + '<br>'
                break;
              case 'perGDP':
                tempDom = '人均GDP：' + value[2][2] + '<br>'
                break;
            }
            // prettier-ignore
            return '区：' + value[3] + '<br>'
                + tempDom
          }
        },
        visualMap: [
          {
            show: false,
            dimension: 3,
            categories: props?.cityAreaData.areaNameList,
            inRange: {
              color: (() => {
                // prettier-ignore
                let colors = ['#51689b', '#ce5c5c', '#fbc357', '#8fbf8f', '#659d84', '#fb8e6a', '#c77288', '#786090', '#91c4c5', '#6890ba'];
                return colors.concat(colors);
              })()
            }
          }
        ],
        animationDurationUpdate: 1000,
        animationEasingUpdate: 'quinticInOut',
        xAxis: {
          type: 'value',
          name: '销量(套)',
          max: pxToRem(15000),
          min: 0,
          nameGap: pxToRem(30),
          nameLocation: 'end',
          axisLabel: {
            show: true,
            color: "white",
            textStyle: {
              fontSize: pxToRem(12),
            },
            showMinLabel: false
          },
          nameTextStyle: {
            fontSize: pxToRem(10),
            color: 'white',
            align: 'left',
            verticalAlign: 'top',
            padding: [pxToRem(9), 0, 0, 0]
          },
          axisTick: {
            show: false // 不显示坐标轴刻度线
          },
          axisLine: {
            show: true, // 不显示坐标轴线
            lineStyle: {}
          },
          splitLine: {
            show: false // 不显示网格线
          }
        },
        yAxis: {
          type: 'value',
          name: '单价(万元)',
          max: 1000,
          axisLabel: {
            show: true,
            color: "white",
            textStyle: {
              fontSize: pxToRem(12),
            }
          },
          nameTextStyle: {
            fontSize: pxToRem(10),
            color: 'white'
          },
          axisTick: {
            show: false // 不显示坐标轴刻度线
          },
          axisLine: {
            show: false, // 不显示坐标轴线
          },
          splitLine: {
            show: false // 不显示网格线
          },
        },
        series: [
          {
            type: 'scatter',
            label: {
              show: true,
              fontSize: pxToRem(10),
              position: 'inside',
              color: '#fff',
              formatter(params) {
                return params.data[3]
              }
            },
            itemStyle: {
              opacity: 0.8
            },
            data: props?.cityAreaData.series[0],
            symbolSize: (val) => {
              return macroEconomicDataStatisticsSizeFunc(val[2][tempSymbolSizeIndex]);
            }
          }
        ]
      },
      options: [],
    }
    initMacroEconomicDataStatistics(option)
    option && myChart.value.setOption(option, true);
  }
}

const updateChart = () => {
  if (myChart.value) {
    myChart.value.dispose(); // 销毁旧图表实例
  }
  initEchart();
};

const disposeChart = () => { // 销毁旧图表实例
  if (myChart.value) {
    myChart.value.dispose(); // 销毁旧图表实例
  }
}

defineExpose({
  updateChart,
  disposeChart
})

onMounted(() => {
  initEchart();
  window.addEventListener("resize", updateChart);
})

onUnmounted(() => {
  window.removeEventListener("resize", updateChart);
})
</script>

<style scoped lang="less">
.h293 {
  height: 293px;
}
</style>